<template>
  <el-menu
    :default-active="defaultActive"
    class="el-menu-vertical-demo"
    :router="true"
		:unique-opened="true"
    @open="handleOpen"
    @close="handleClose"
  >
    <template v-for="(item,index) in menus">
      <el-submenu v-if="item.menuVOList.length > 0" :key="index" :index="item.name">
        <template slot="title">
          <i class="menu-icon" :class="item.iconCls" />
          {{ item.nameZh }}
        </template>
        <el-menu-item
          v-for="(subItem,subIndex) in item.menuVOList"
          :key="subIndex"
          :index="subItem.name"
          :route="toRoute({name: subItem.name})"
        >{{ subItem.nameZh }}</el-menu-item>
      </el-submenu>
      <el-menu-item v-else :key="index" :index="item.name" :route="toRoute({name: item.name})">
        <i class="menu-icon" v-if="item.iconCls" :class="item.iconCls" />
				{{ item.nameZh }}
      </el-menu-item>
    </template>
  </el-menu>
</template>
<script>
export default {
  name: 'Slider',
  props: {
    menus: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      defaultActive: ''
    }
  },
  watch: {
    $route(val) {
      this.setCurrentRoute()
    }
  },
  mounted() {
    this.setCurrentRoute()
  },
  methods: {
    // 设置router active状态
    setCurrentRoute() {
      const { parentName } = this.$route.meta
      parentName
        ? (this.defaultActive = parentName)
        : (this.defaultActive = this.$route.name)
    },
    toRoute(item) {
      if (item.name) {
        return { name: item.name }
      } else if (item.path) {
        return { path: item.path }
      }
      return {}
    },
    handleOpen(key, keyPath) {
    },
    handleClose(key, keyPath) {
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
